<!-- 优惠券主页 -->
<template>
	<div class="">
		<div class="header">
			<div>
				<div class="grid-content bg-purple cl">
					<div>领取次数</div>
					<div>{{ getNum }}次</div>
				</div>
			</div>
			<div>
				<div class="grid-content bg-purple cl">
					<div>使用数</div>
					<div>{{ useNum }}次</div>
				</div>
			</div>
			<div>
				<div class="grid-content bg-purple cl">
					<div>拉新效果</div>
					<div>{{ pullNew }}人</div>
				</div>
			</div>
			<div>
				<div class="grid-content bg-purple cl">
					<div>收益效果</div>
					<div>{{ getMoney }}元</div>
				</div>
			</div>
		</div>
		<div style="margin-top: 20px;margin-bottom: 20px;"><search @search="search"></search></div>

		<div>
			<el-table :data="tableData" style="width: 100%;" :header-cell-style="{ background: '#eef1f6' }">
				<el-table-column prop="date" label="券领取时间" width="180" align="center"></el-table-column>
				<el-table-column prop="name" label="姓名" width="80" align="center"></el-table-column>
				<el-table-column prop="phone" label="手机号" width="150" align="center"></el-table-column>
				<el-table-column prop="type" label="券类型" width="80" align="center"></el-table-column>
				<el-table-column prop="mc" label="券名称" width="100" align="center"></el-table-column>
				<el-table-column prop="code" label="兑换码" align="center"></el-table-column>
				<el-table-column prop="set" label="活动券配置" align="center"></el-table-column>
				<el-table-column prop="num" label="数量" width="70" align="center"></el-table-column>
				<el-table-column prop="statu" label="状态" width="70" align="center"></el-table-column>
				>
				<el-table-column prop="day" label="有效期剩余天数/天" align="center"></el-table-column>
				>
				<el-table-column prop="" label="操作" fixed="right" align="center">
					<template slot-scope="scope">
						<el-button type="text" @click="lose">失效</el-button>
					</template>
				</el-table-column>
				>
			</el-table>
		</div>
		<lose :loseAlert="loseAlert" @loseClose="loseAlert = false"></lose>
	</div>
</template>

<script>
// 失效弹窗
import lose from '../Alert/lose.vue';
// 搜索
import search from '../public/searchTable.vue';
export default {
	components: {
		search,
		lose
	},
	data() {
		return {
			// 收益效果
			getMoney: '0',
			// 拉新效果
			pullNew: '5',
			// 使用数
			useNum: '0',
			// 领取次数
			getNum: '7',
			// 券领取时间
			tableData: [
				{ date: '2019-09-04 16:00:11', name: '张三', phone: '15528034555', type: '满减', mc: '测试券1', code: '1231415', statu: '1', num: '1', day: '50', set: '满200元-10' },
				{ date: '2019-09-04 16:00:11', name: '张三', phone: '15528034555', type: '满减', mc: '测试券1', code: '1231415', statu: '2', num: '1', day: '50', set: '满200元-10' },
				{ date: '2019-09-04 16:00:11', name: '张三', phone: '15528034555', type: '满减', mc: '测试券1', code: '1231415', statu: '3', num: '1', day: '50', set: '满200元-10' },
				{ date: '2019-09-04 16:00:11', name: '张三', phone: '15528034555', type: '满减', mc: '测试券1', code: '1231415', statu: '4', num: '1', day: '50', set: '满200元-10' }
			],

			//券失效弹窗
			loseAlert: false
		};
	},
	computed: {},
	methods: {
		/**
		 * 券失效弹窗
		 */
		lose() {
			this.loseAlert = true;
		},

		/**
		 * @param {Object} 子组件的搜索值
		 */
		search(val) {}
	},
	mounted() {},
	created() {
		localStorage.setItem('merchantCode', this.$route.query.merchantCode);
	} //生命周期 - 创建之后
};
</script>

<style scoped>
/deep/.el-table td,
.el-table th {
	text-align: center !important;
}
.header {
	margin-top: 50px;
	height: 202px;
	border: 1px solid #666666;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 200px;
	padding-right: 200px;
	margin-left: 40px;
	margin-right: 40px;
}
.cl {
	text-align: center;
	font-size: 25px;
}
.cl :last-child {
	font-size: 30px;
	font-weight: bold;
	color: #6d6d6d;
}
</style>
